// 预览图片
import Vue from 'vue'
let Image = Vue.extend({
    // runtimeCompiler: true，在vue.config.js中使用
    template: `<div class="wrap">
            <el-image-viewer v-if="visible" :on-close="close" :url-list="imgList" />
    </div>`,
    data() {
        return {
            visible: false,
            imgList: []
        }
    },
    components: {
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    methods: {
        show(url) {
            this.imgList = [url];
            this.visible = true;
            const m = (e) => { e.preventDefault() };
            document.body.style.overflow = 'hidden';
            document.addEventListener("touchmove", m, false); // 禁止页面滑动

        },
        close() {
            this.visible = false;
            const m = (e) => { e.preventDefault() };
            document.body.style.overflow = 'auto';
            document.removeEventListener("touchmove", m, true);
        },
    }
})
/* 
this.preview.show(url) url 图片地址
*/
export default {
    install(Vue) {
        let _create = (UI) => {
            let UICls = Vue.extend(UI);
            let instance = new UICls();
            instance.$mount();
            document.body.appendChild(instance.$el);
            instance.$watch('visible', function (visible) {
                if (visible) return;
                instance.$el.remove();
            })
            return instance;
        }
        let preview = _create(Image);
        Vue.prototype.$preview = preview;
    }
}